<template>
	<h1>hello world</h1>
	<!-- 插值语法 -->
	<div>{{msg}}</div>
	<div>{{num+1}}</div>
	<div>{{handleclick}}</div>
	<div>{{msg.toUpperCase()}}</div>
	<div><a :href="url">baidu一下</a></div>
	<button @click="login">登录</button>
	<div :class="color"></div>
	<button @click="changecolor">点击换色</button>
	<div class="login">
		<h3>登录</h3>
		<div>
			用户名：<el-input type="text" v-model="username" style="width:200px"/>
		</div>
		<div>
			密码：<el-input type="text" v-model="password" style="width: 200px"/>
		</div>
		<el-button type="primary" @click="testlogin">登录</el-button>
	</div>
	<button @click="changeisshow">点击有惊喜</button>
	<div v-if="isshow">dududu</div>
	<ul>
		<li v-for="news in newslist" :key="news">
			{{news.title}}--{{news.content}}
		</li>
	</ul>
	<table border="1">
		<tr><td>id</td><td>姓名</td><td>年龄</td></tr>
		<tr v-for="user in userlist" :key="user.id">
			<td>{{user.id}}</td><td>{{user.name}}</td><td>{{user.age}}</td>
		</tr>
	</table>
	
	<el-row>
		<el-col :span="8">
			<el-button type="primary" @click="adduser">增加用户</el-button>
		</el-col>
		<el-col :span="8">
			<el-input type="text" v-model="searchvalue" placeholder="请输入用户名" style="width:200px"/>
		</el-col>
		<el-col :span="8">
			<el-button type="primary" @click="search">搜索</el-button>
		</el-col>
	</el-row>
	<el-table :data="userlist" border style="width:100%">
		<el-table-column prop="id" label="用户id" />
		<el-table-column prop="name" label="用户姓名"/>
		<el-table-column prop="age" label="用户年龄" />
		 <el-table-column fixed="right" label="操作" width="120">
		      <template #default='scope'>
		        <el-button link type="primary" size="small" @click="handleDel(scope.row)">删除</el-button>
		        <el-button link type="primary" size="small">修改</el-button>
		      </template>
		    </el-table-column>
	</el-table>
	
	  <el-dialog
	    v-model="dialogVisible"
	    title="增加用户"
	    width="70%"
	    :before-close="handleClose"
	  >
		<el-form :model="form" label-width="120px">
		    <el-form-item label="用户姓名:">
		      <el-input v-model="form.name" />
		    </el-form-item>
			<el-form-item label="用户年龄:">
			  <el-input v-model="form.age" />
			</el-form-item>
		</el-form>
		<el-button type="primary" @click="onSubmit">提交</el-button>
	  </el-dialog>
	
</template>

<script>
	export default{
		data(){
			return{
				msg:"hello world!",
				num:1,
				url:"http://www.baidu.com",
				color:"red",
				username:"lk",
				password:"123456",
				isshow:false,
				newslist:[
					{
						title:"新闻标题1",
						content:"新闻内容1",
					},
					{
						title:"新闻标题2",
						content:"新闻内容2"
					},
					{
						title:"新闻标题3",
						content:"新闻内容3"
					}
				],
				userlist:[],
				dialogVisible:false,
				form:{
					name:'',
					age:20,
				},
				searchvalue:'',
			}
		},
		computed:{
			handleclick(){
				return this.num+2;
			}
		},
		methods:{
			handleDel(row){
				var that=this
				this.$axios.post('http://localhost/springboot/deleteUserByIdjson/'+row.id)
				.then(function(res){
					that.userlist=res.data.data
					that.getuserdata()
				})
				.catch(function(err){
					alert('删除失败！')
				})
			},
			search(){
				var that=this
				this.$axios.post('http://localhost/springboot/searchjson/'+this.searchvalue)
				.then(function(res){
					that.userlist=res.data.data
				})
				.catch(function(err){
					alert('搜索失败！')
				})
			},
			getuserdata(){
				var that=this
				console.log(this.$axios)
				this.$axios.get('http://localhost/springboot/userlistjson')
				.then(function(res){
					console.log(res.data.data)
					that.userlist=res.data.data
				})
				.catch(function(err){
					alert('连接失败！')
				})
			},
			login(){
				alert("登录成功！");
			},
			changecolor(){
				if(this.color=="blue"){
					this.color="red";
				}else{
					this.color="blue";
				}
			},
			testlogin(){
				// if(this.username=="lk"&&this.password=="123456"){
				// 	alert("登录成功！！！")
				// }else{
				// 	alert("用户名或密码错误！！！")
				// }
				this.$axios.post('http://localhost/springboot/loginjson',{
					username:this.username,
					password:this.password,
				})
				.then(function(res){
					// console.log(res.data.data)
					if(res.data.code==0){
						alert("登录成功！！！")
					}else{
						alert("用户名或密码错误！！！")
					}
				})
				.catch(function(err){
					alert("发送失败！")
				})
			},
			changeisshow(){
				this.isshow=!this.isshow
			},
			adduser(){
				this.dialogVisible=true
			},
			onSubmit(){
				var that=this
				this.$axios.post('http://localhost/springboot/addcommitjson',this.form)
				.then(function(res){
						that.form={}
						that.dialogVisible=false
						that.getuserdata()
						that.$message({
							message:'添加成功',
							type:'success',
						})
					
				})
				.catch(function(err){
					alert("发送失败！")
				})
			}
		},
		mounted(){
			this.getuserdata()
		},
	}
</script>

<style>
	#app {
	  font-family: Avenir, Helvetica, Arial, sans-serif;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  text-align: center;
	  color: #2c3e50;
	  margin-top: 60px;
	}
	a {
		text-decoration: none;
	}
	.red {
		background-color: red;
		width: 80px;
		height: 80px;
	}
	.blue {
		background-color: blue;
		width: 80px;
		height: 80px;
	}
	li {
		list-style: none;
	}
	table {
		margin: 20 auto;
	}
</style>